<template>
  <div class="music-list">
    <MusicItem
      v-for="(item, index) in musicList"
      @play="handlePlay"
      @pause="handlePause"
      :key="index"
      :current="current"
      :music="item"
    />
  </div>
</template>

<script>
import MusicItem from "./components/MusicItem";
import { playMusic, pauseMusic } from "@/tools/playMusic";
export default {
  name: "MusicListModule",
  components: {
    MusicItem
  },
  methods: {
    handlePause() {
      pauseMusic();
    },
    handlePlay(music) {
      const source = music.source;
      this.current = music;
      playMusic(source);
    }
  },
  data() {
    return {
      current: null,
      musicList: [
        {
          type: "音乐",
          poster:
            "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1438685749,289751536&fm=26&gp=0.jpg",
          name: "稻香",
          author: "周杰伦",
          album: "魔杰座",
          source: "http://music.163.com/song/media/outer/url?id=30245655.mp3"
        },
        {
          type: "音乐",
          poster:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1971729909,3374867343&fm=26&gp=0.jpg",
          name: "逆战",
          author: "张杰",
          album: "逆战主题曲",
          source: "http://music.163.com/song/media/outer/url?id=30245655.mp3"
        }
      ]
    };
  }
};
</script>

<style scoped lang="less">
.music-list {
  margin: 0 auto;
  padding: 2vh 5% 10vh 5%;
  width: 90%;
  overflow: auto;
}
</style>
